<#include "include/_meta.html">
<!--/meta 作为公共模版分离出去-->

<title>添加门店 </title>
<meta name="keywords" content="汽车租赁">
<meta name="description" content="汽车租赁">
	<!-- 百度地图所用样式-->
	<style>
	      #preview{
	          border: 1px solid #bfd2e1;
	          width: 490px;
	          height: 368px;
	          font-family: Arial, Helvetica, sans-serif,"宋体";
	      }
	      #map_container{
	          height: 368px;
	      }
	      #float_search_bar{
	          z-index: 2012;
	          position: absolute;
	          width: 480px;
	          height: 31px;
	          background: url("http://dev.baidu.com/wiki/static/map/tuan/images/search_bar.png") repeat-x;
	          background-position: 0 -21px;
	          padding: 3px 0 0 10px;
	       }
	      #float_search_bar label, #float_search_bar span{
	          color: #0787cb;
	          font-size: 14px;
	      }
	      #float_search_bar input{
	          width: 180px;
	          height: 16px;
	          margin-top: 1px;
	      }
	      #float_search_bar input:focus{
	          outline: none;
	      }
	      #float_search_bar button{
	           border: 0;
	           color: white;
	           width: 77px;
	           height: 20px;
	           background: url("http://dev.baidu.com/wiki/static/map/tuan/images/search_bar.png") no-repeat;
	           background-position: 0 0;
	           margin-right: 5px;
	           cursor: pointer;
	       }
   	</style>
</head>
<body>
	<article class="page-container">
	<form class="form form-horizontal" id="form-store-edit">
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>门店名称：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="${dept.deptName}" placeholder="门店名称" id="deptName" name="deptName">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>门店固话：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="${dept.deptPhone}" placeholder="门店固话" id="deptPhone" name="deptPhone">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>门店店长：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" autocomplete="off" value="${dept.ownerName}" placeholder="门店店长" id="ownerName" name="ownerName">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>店长电话：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="${dept.ownerMobile}" placeholder="店长电话" id="ownerMobile" name="ownerMobile">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>所属区域：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="${dept.inCity}" placeholder="所属区域" name="inCity" id="inCity" mod="address|notice" mod_address_source="hotel" mod_address_suggest="@Beijing|北京|53@Shanghai|上海|321@Shenzhen|深圳|91@Guangzhou|广州|80@Qingdao|青岛|292@Chengdu|成都|324@Hangzhou|杭州|383@Wuhan|武汉|192@Tianjin|天津|343@Dalian|大连|248@Xiamen|厦门|61@Chongqing|重庆|394@" mod_address_reference="cityid" mod_notice_tip="中文/拼音">
			<input id="cityid" name="cityid" type="hidden" value="{$cityid}" />
		</div>
		<div id="jsContainer" class="jsContainer" style="height:0">
    		<div id="tuna_alert" style="display:none;position:absolute;z-index:999;overflow:hidden;"></div>
    		<div id="tuna_jmpinfo" style="visibility:hidden;position:absolute;z-index:120;"></div>
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>详细地址：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="${dept.address}" placeholder="详细地址" name="address" id="address">
		</div>
	</div>
	<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">备注：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea name="remark" cols="" rows="" class="textarea" laceholder="说点什么...最少输入10个字符" onKeyUp="textarealength(this,100)" id="remark">${dept.remark}</textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
			</div>
		</div>
	<div class="row cl">
		<div class="formControls col-xs-8 col-sm-9" style="margin-left:200px;margin-top:80px">
			<div id="preview">
       			 <div id="float_search_bar">
	           		 <label>区域：</label>
	            	 <input type="text" id="keyword" />
	            	 <button id="search_button">查找</button>
	            	 <span>点击地图或标注获取坐标</span>
       		 	 </div>
       		 	 <div id="map_container"></div>
    		</div>
    		<div id="result" style="margin-top: 4px;"></div>
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>所在经度：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" readOnly="true" value="${dept.gpsLon}" placeholder="所在经度" name="gpsLon" id="gpsLon">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>所在纬度：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" readOnly="true" value="${dept.gpsLat}" placeholder="所在纬度" name="gpsLat" id="gpsLat">
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
		</div>
	</div>
	</form>
</article>
	
<!--_footer 作为公共模版分离出去--> 
<#include "include/_footer.html">
<!--/_footer /作为公共模版分离出去--> 

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="lib/city/fixdiv.js"></script>
<script type="text/javascript" src="lib/city/address.js"></script>
<script type="text/javascript">
	
	//
	$("#form-store-edit").validate({
		rules:{
			deptName:{
				required:true,
			},
			deptPhone:{
				required:true,
				digits:true
			},
			ownerName:{
				required:true
			},
			ownerMobile:{
				required:true,
				digits:true
			},
			inCity:{
				required:true
			},
			address:{
				required:true
			},
			gpsLon:{
				required:true,
				number:true
			},
			gpsLat:{
				required:true,
				number:true
				
			},
			remark:{
				required:true
			}
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
			
	   		$.ajax({
	            type: 'put', 
				contentType:"application/json", 
	            url: '/editstore/${dept.deptId}', 
	            data:JSON.stringify({
		                'deptName': $("#deptName").val(),
		                'deptPhone': $("#deptPhone").val(),
						'ownerName': $("#ownerName").val(),
						'ownerMobile': $("#ownerMobile").val(),
		                'inCity': $("#inCity").val(),
		                'address': $("#address").val(),
						'gpsLon': $("#gpsLon").val(),
						'gpsLat': $("#gpsLat").val(),
						'remark': $("#remark").val()
						}),
	            success:function(data){ 
					alert("修改成功");
	 				console.log('提交成功！');
	 				var index = parent.layer.getFrameIndex(window.name);
					parent.$(".btn-primary").click();
					parent.layer.close(index);
					
	            }
	
	        });	
		}
	});
	
	//下边为百度地图信息
	function getUrlParas(){
            var hash = location.hash,
                para = {},
                tParas = hash.substr(1).split("&");
            for(var p in tParas){
                if(tParas.hasOwnProperty(p)){
                    var obj = tParas[p].split("=");
                    para[obj[0]] = obj[1];
                }
            }
            return para;
        }
        var para = getUrlParas(),
            center = para.address?decodeURIComponent(para.address) : "郑州市",
            city = para.city?decodeURIComponent(para.city) : "郑州市";
    
        document.getElementById("keyword").value = center;
    
        var marker_trick = false;
        var map = new BMap.Map("map_container");
        map.enableScrollWheelZoom();
    
        var marker = new BMap.Marker(new BMap.Point(80.404, 34.915), {
            enableMassClear: false,
            raiseOnDrag: true
		 });
        marker.enableDragging();
        map.addOverlay(marker);
    
        map.addEventListener("click", function(e){
            if(!(e.overlay)){
                map.clearOverlays();
                marker.show();
                marker.setPosition(e.point);
                setResult(e.point.lng, e.point.lat);
            }
        });
        marker.addEventListener("dragend", function(e){
            setResult(e.point.lng, e.point.lat);
        });
    
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map},
			 pageCapacity: 1
        });
        local.setSearchCompleteCallback(function(results){
            if(local.getStatus() !== BMAP_STATUS_SUCCESS){
                alert("无结果");
            } else {
			     marker.hide();
			 }
        });
        local.setMarkersSetCallback(function(pois){
            for(var i=pois.length; i--; ){
                var marker = pois[i].marker;
                marker.addEventListener("click", function(e){
                    marker_trick = true;
                    var pos = this.getPosition();
                    setResult(pos.lng, pos.lat);
                });
            }
        });
    
        window.onload = function(){
            local.search(center);
            document.getElementById("search_button").onclick = function(){
                local.search(document.getElementById("keyword").value);
            };
            document.getElementById("keyword").onkeyup = function(e){
                var me = this;
                e = e || window.event;
                var keycode = e.keyCode;
                if(keycode === 13){
                    local.search(document.getElementById("keyword").value);
                }
            };
        };
        function a(){
            document.getElementById("float_search_bar").style.display = "none";
        }
        
        /*
         * setResult : 定义得到标注经纬度后的操作
         * 请修改此函数以满足您的需求
         * lng: 标注的经度
         * lat: 标注的纬度
         */
        function setResult(lng, lat){
			$("#gpsLon").val(lng);
			$("#gpsLat").val(lat);
        }
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>